<template>
	<view class="container">
		<view class="item f-c-between" v-for="(item,i) in noticeList" :key="i" @click="goDetail(item.id)">
			<view class="label">{{item.title}}</view>
			<view class="value">{{item.createtime_text}}</view>
			<view v-if="item.read==0" class="dot"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				noticeList: [],
				params: {
					page: 1,
					limit: 20,
					total: 0
				}
			};
		},
		computed: {
			loadStatus() {
				if (this.noticeList.length == 0) return ""
				if (this.noticeList.length < this.params.total) return 'loadmore'
				if (this.noticeList.length == this.params.total) return "nomore"
			}
		},
		onLoad() {
			this.getMessageList()
		},
		methods: {
			//获取通知信息
			getMessageList() {
				this.$api.get_user_message(this.params).then(res => {
					let {
						list,
						total
					} = res
					this.noticeList = this.noticeList.concat(list || [])
					this.params.total = total
				})
			},

			//刷新数据
			async onRefreshData() {
				this.params.page = 1
				this.noticeList = []
				await this.getMessageList()
			},

			goDetail(id) {
				uni.navigateTo({
					url: '/pages/notice/detail?id=' + id
				})
			}
		},
		onPullDownRefresh() {
			this.onRefreshData()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.noticeList.length == this.params.total) {
				return
			}
			this.params.page++
			this.getNetList()
		}
	}
</script>

<style>
	page {
		background-color: #F4F5F7;
	}
</style>
<style lang="scss" scoped>
	.container {
		padding: 20rpx 16rpx;

		.item {
			margin-bottom: 20rpx;
			background-color: #ffffff;
			padding: 26rpx 20rpx 26rpx 28rpx;
			border-radius: 14rpx;
			border: 1px solid #EFEFEF;
			position: relative;

			.label {
				font-weight: 400;
				// font-size: 30rpx;
				font-size: calc(30rpx * 1.2);
				color: #51565D;
			}

			.value {
				font-weight: 400;
				// font-size: 24rpx;
				font-size: calc(24rpx * 1.2);
				color: #999999;
			}

			.dot {
				width: 10rpx;
				height: 10rpx;
				background-color: #ff5656;
				border-radius: 50%;
				position: absolute;
				right: 0;
				top: 0;
			}
		}
	}
</style>